<template>
  <div class="loginPage">
    <div class="box">
      <div class="top">山东省耕地保护动态监管工作平台</div>
      <div>
        <a-form :form="form" @submit="handleSubmit">
          <a-form-item>
            <a-input
              size="large"
              type="text"
              placeholder="请输入用户名"
              v-decorator="[
                'name',
                { rules: [{ required: true, message: '用户名不能为空!' }] },
              ]"
            >
              <a-icon
                slot="prefix"
                type="user"
                :style="{ color: 'rgba(0,0,0,.25)' }"
              />
            </a-input>
          </a-form-item>

          <a-form-item>
            <a-input
              size="large"
              type="password"
              placeholder="请输入密码"
              v-decorator="[
                'password',
                { rules: [{ required: true, message: '密码不能为空!' }] },
              ]"
            >
              <a-icon
                slot="prefix"
                type="lock"
                :style="{ color: 'rgba(0,0,0,.25)' }"
              />
            </a-input>
          </a-form-item>

          <a-form-item>
            <a-button type="primary" size="large" html-type="submit"
              >登录</a-button
            >
          </a-form-item>
        </a-form>
      </div>
    </div>
  </div>
</template>

<script>
import { loginUserInfo } from "../api/api";
export default {
  data() {
    return {
      name: "",
      password: "",
      tsName: "",
      tsPassword: "",
      formLayout: "horizontal",
      form: this.$form.createForm(this, { name: "coordinated" }),
    };
  },
  methods: {
    handleSubmit(e) {
      e.preventDefault();
      this.form.validateFields(async (err, values) => {
        console.log(values.name == undefined && values.password == undefined);
        if (values.name == undefined && values.password == undefined) {
        } else {
          const params = {
            username: values.name,
            password: values.password,
          };
          const data = await loginUserInfo(params);
          if (data.code == 200) {
            this.$message.success(data.message);
            localStorage.setItem("token", data.result.token);
            localStorage.setItem("user", JSON.stringify(data.result.loginUser));
            const name = this.$Base64.encode(values.name);
            sessionStorage.setItem('create',1)

            this.$router.push({
              path: `/admin?uid=${name}`,
            });
          } else {
            this.$message.error(data.message);
          }
        }
      });
    },
  },
};
</script>

<style scoped lang="less">
.loginPage {
  width: 100%;
  height: 100vh;
  padding-top: 150px;
  background: #f5f5f5 url("../assets/img/background.a568162c.svg") no-repeat 50%;
}
.box {
  width: 490px;
  margin: 0 auto;
  .top {
    font-size: 32px;
    font-weight: 800;
    text-align: center;
    margin-bottom: 30px;
  }
}
.ant-btn {
  width: 490px !important;
}
</style>
